<template>
  <div class="w-full h-full p-3 rounded-xl border-slate-200 bg-white">
    <div class="flex items-center  content-center  mb-2">
      <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base" />
        <span class="title font-semibold text-indigo-600 ml-1.5">{{ $t('inventoryInforSummary.documentsTotal') }}</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
      <el-form :inline="true" :model="from" class="align-center search-form" style="margin-bottom: 10px">
        <el-form-item class="label" :label="$t('iot.time')">
          <el-date-picker style="width: 220px" v-model="from.time" type="daterange" range-separator="-"
            :start-placeholder="$t('wms.startTime')" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            :end-placeholder="$t('wms.endTime')" class="custom-date-picker" />
        </el-form-item>
        <el-button icon="Search" class="buttons" size="small" type="primary" @click="getSerch" style="margin-top: 3px">
          {{ $t('wms.search') }}
        </el-button>
      </el-form>
    </div>
    <div class="w-full flex items-center mt-4" style="height: 90%;text-align: center">
      <div class="w-full h-full" style="border-radius: 16px;">
        <el-empty v-if="!titleList.length" :description="$t('inventoryInforSummary.allocateDataFor')" />
        <v-chart ref="currentRef" v-else />
      </div>
    </div>
  </div>
</template>
<script setup>
import '@/assets/font/iconfont.css'
import { getSemiTransferBarcodes } from '@/api/mes/allocationInforViewApi'
import * as echarts from 'echarts'
import useI18n from '@/hooks/language'
import { onMounted, reactive, ref } from 'vue'
import moment from 'moment'

const { t } = useI18n()
const data = reactive({
  current: 1,
  size: 999999
})
const from = reactive({
  time: [],
  warehouseCode: ''
})

const listOut = ref([])
const listIn = ref([])
const titleList = ref([])
const currentRef = ref(null)

const chartOption = () => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#e9ecef',
      borderWidth: 1,
      textStyle: {
        color: '#666',
        fontSize: 12
      },
      padding: [8, 12],
      formatter: function (params) {
        const warehouse = params[0].axisValue
        const outValue = params[0].value
        const inValue = params[1].value
        return `<div style="font-weight: bold; color: #333; margin-bottom: 4px;">${warehouse}</div>
                <div style="display: flex; align-items: center; margin: 4px 0;">
                  <span style="display: inline-block; width: 8px; height: 8px; background: #4a90e2; border-radius: 50%; margin-right: 6px;"></span>
                  <span style="color: #2482cc; font-weight: 500;">${t('common.documentsOut')}:</span>
                  <span style="margin-left: 8px; font-weight: bold;">${outValue}</span>
                </div>
                <div style="display: flex; align-items: center; margin: 4px 0;">
                  <span style="display: inline-block; width: 8px; height: 8px; background: #4caf50; border-radius: 50%; margin-right: 6px;"></span>
                  <span style="color: #338034; font-weight: 500;">${t('common.documentsIn')}:</span>
                  <span style="margin-left: 8px; font-weight: bold;">${inValue}</span>
                </div>`
      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '0',
      containLabel: true,
      backgroundColor: '#f8f9fa',
      borderColor: '#e9ecef',
      borderWidth: 1
    },
    legend: {
      data: [t('common.documentsOut'), t('common.documentsIn')],
      textStyle: {
        color: '#666',
        fontSize: 14
      },
      itemWidth: 25,
      itemHeight: 12,
      itemGap: 30,
      top: 10
    },
    xAxis: {
      type: 'category',
      nameTextStyle: {
        nameLocation: 'start'
      },
      axisLabel: {
        show: true,
        fontSize: 12,
        rotate: 30,
        color: '#666'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e9ecef',
          width: 1
        }
      },
      axisTick: {
        show: true,
        alignWithLabel: true
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e9ecef',
          type: 'dashed'
        }
      },
      data: titleList.value
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e9ecef'
        }
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e9ecef',
          type: 'dashed'
        }
      },
      axisLabel: {
        color: '#666'
      }
    },
    series: [
      {
        name: t('common.documentsOut'),
        type: 'bar',
        barWidth: '30%',
        barGap: '0%',
        label: {
          show: true,
          position: 'top',
          formatter: '{c}',
          color: '#2482cc',
          fontSize: 12,
          fontWeight: 'bold',
          padding: [4, 6],
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          borderRadius: 4,
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 2
        },
        data: listOut.value,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4a90e2' },
            { offset: 1, color: '#2482cc' }
          ]),
          borderRadius: [6, 6, 0, 0],
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 5,
          shadowOffsetY: 2
        }
      },
      {
        name: t('common.documentsIn'),
        type: 'bar',
        barWidth: '30%',
        barGap: '0%',
        label: {
          show: true,
          position: 'top',
          formatter: '{c}',
          color: '#338034',
          fontSize: 12,
          fontWeight: 'bold',
          padding: [4, 6],
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          borderRadius: 4,
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 2
        },
        data: listIn.value,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4caf50' },
            { offset: 1, color: '#338034' }
          ]),
          borderRadius: [6, 6, 0, 0],
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 5,
          shadowOffsetY: 2
        }
      }
    ]
  }
}

// 查询
const getSerch = async () => {
  await semiTransferBarcodes()
  if (currentRef.value) {
    currentRef.value.setOption(chartOption())
  } else {
    setTimeout(() => {
      if (currentRef.value) {
        currentRef.value.setOption(chartOption())
      }
    }, 100)
  }
}
// 获取默认时间
const getDefaultDateRange = () => {
  const start = moment().subtract(7, 'days').format('YYYY-MM-DD')// 本月一号
  const end = moment().format('YYYY-MM-DD') // 今天
  from.time = [start, end]
}

onMounted(async () => {
  await getDefaultDateRange()
  await semiTransferBarcodes()
  if (currentRef.value) {
    currentRef.value.setOption(chartOption())
  } else {
    setTimeout(() => {
      if (currentRef.value) {
        currentRef.value.setOption(chartOption())
      }
    }, 100)
  }
})

const semiTransferBarcodes = async () => {
  await getSemiTransferBarcodes({
    startTime: from.time[0],
    endTime: from.time[1],
    warehouseCode: from.warehouseCode,
    current: data.current,
    size: data.size
  }).then(res => {
    if (res.code == 0) {
      titleList.value = ["RM", "YH", 'JC', "LVT", "TH", "LMHH", "JJG"]
      listIn.value = []
      listOut.value = []
      // res.data.records.forEach(item => {
      //   // 将所有仓库添加到titleList里面并去重
      //   if(titleList.value.indexOf(item.warehouCode)===-1){
      //     titleList.value.push(item.warehouCode)
      //   }
      // })
      titleList.value.forEach(item => {
        let a = res.data.records.filter(i => i.warehouCode === item && i.transFer === '调入').reduce((sum, record) => sum + (record.barcodeCount || 0), 0)
        let b = res.data.records.filter(i => i.warehouCode === item && i.transFer === '调出').reduce((sum, record) => sum + (record.barcodeCount || 0), 0)
        listIn.value.push(a)
        listOut.value.push(b)
      })
    }
  })
}
</script>
<style scoped lang="scss"></style>
